import React, { useEffect } from 'react'
import { Form, Input, Button, Select, Checkbox } from 'antd'
const TakeNumber = ({ auto_assign_config ,Update}) => {
    const [form] = Form.useForm();

    console.log(auto_assign_config)
    useEffect(() => {
        form.setFieldsValue({
            ...auto_assign_config,
            jiange: auto_assign_config.jiange == 1 ? true : false,
        })
    }, [auto_assign_config])

    const BarrierGate = [
        {
            label: "闪烁",
            vlaue: "1"
        },
        {
            label: "熄灭",
            vlaue: "0"
        },
        {
            label: "常亮(非常耗电)",
            vlaue: "2"
        }
    ]


    const Save = () => {
        form.validateFields().then(values => {
            console.log(values)
            Update("auto_assign_config",JSON.stringify(values))
        })
    }

    return (
        <div style={{ marginTop: "3vh" }}>
            <div
                style={{ fontSize: '20px', fontWeight: '550', margin: "30px" }}
            >自助取号配置
            </div>
            <Form
                name="basic"
                labelCol={{ span: 7 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 650 }}
                autoComplete="off"
                form={form}
            >

                <Form.Item
                    label="入场授权时长(分钟)"
                    name="rushichang"
                    initialValue={5}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="入场有效期内灯状态"
                    name="ruyouxiaoqineideng"

                >
                    <Select showSearch placeholder="道闸上报">
                        {BarrierGate.map(item => (
                            <Select.Option key={item.vlaue} value={item.vlaue}>{item.label}</Select.Option>
                        ))}
                    </Select>
                </Form.Item>
                <Form.Item
                    label="入场有效期过后灯状态"
                    name="ruyouxiaoqineihou"

                >
                    <Select showSearch >
                        {BarrierGate.map(item => (
                            <Select.Option key={item.vlaue} value={item.vlaue}>{item.label}</Select.Option>
                        ))}
                    </Select>

                </Form.Item>
                <Form.Item
                    label="授权后锁状态"
                    name="ruzhuangtai"
                    initialValue={"1"}
                >

                    <Select>
                        <Select.Option value="0">保持现有状态</Select.Option>
                        <Select.Option value="1">初始化锁状态,锁舌缩入</Select.Option>
                        <Select.Option value="2">电机反转,手牌禁止拔出</Select.Option>
                    </Select>

                </Form.Item>

                <Form.Item
                    label="授权前是否检查手牌"
                    name="rushupai"

                >
                    <Select>
                        <Select.Option value="1">检查</Select.Option>
                        <Select.Option value="0">不检查</Select.Option>
                    </Select>

                </Form.Item>




                <Form.Item
                    label="出场授权时长(分钟)"

                    name="chushichang"
                    initialValue={5}
                >
                    <Input max={65535} />
                </Form.Item>


                <Form.Item
                    label="出厂有效期过后灯状态"
                    name="chuyouxiaoqineihou"

                >
                    <Select>
                        <Select.Option value="1">闪烁</Select.Option>
                        <Select.Option value="0">熄灭</Select.Option>
                    </Select>

                </Form.Item>





                <Form.Item
                    label="出场有效期灯状态"
                    name="chuyouxiaoqineideng"

                >
                    <Select>
                        <Select.Option value="1">闪烁</Select.Option>
                        <Select.Option value="0">熄灭</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    label="分配号方式"
                    name="fenpeihaofanshi"

                >
                    <Select>
                        <Select.Option value="1">多个号分散区域分配</Select.Option>
                        <Select.Option value="2">按间隔柜号配置分配</Select.Option>
                    </Select>

                </Form.Item>






                <Form.Item
                    label="柜号分配间隔数"
                    name="jiange"

                >
                    <Input min={1} />
                </Form.Item>
                {/* 1 允许 0 禁止 */}
                <Form.Item wrapperCol={{ offset: 7, span: 8 }} name="ganjin" valuePropName="checked" >
                    <Checkbox>允许脏柜被分配</Checkbox>
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 7, span: 8 }}>
                    <Button type="primary" htmlType="submit" onClick={Save}>
                        保存并设置
                    </Button>

                </Form.Item>
            </Form>


        </div>
    )
}

export default TakeNumber